<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				width: 300px;
				height: 300px;
				background-color: lightblue;
				
				/*  过渡transition :	  过渡的属性 过渡时间 速度 延迟；
				ease：默认值，慢-快-慢
				linear：匀速
				ease-in：低速开始
				ease-out：低速结束
				ease-in-out：低速开始和结束
				  */
				/* transition: width 3s linear 1s;  */
			/*	 all  所有的  */
				transition: all 2s linear;   
			}
			/*  鼠标悬停  */
			.box:hover{
			/*	width: 800px;
				height: 500px;     */
				background-color: aqua;
			/*	transform: 转换:
				1.位移translate(x轴方向,y轴方向)/translatex(x轴方向)/translatey(y轴方向)
				位移的值可以是百分比,对应自身宽高的百分比.
				2.缩放scale：倍数
			 */
			/*	transform: translate(100px,200px);  */
			/*	transform: scale(-2);  */
			/*	transform: skewY(45deg);  */
			/*	transform: rotatey(-45deg);  */
			/*	复合写法  */
			transform: translate(-100px) scale(2) rotate(10deg); 
			transform-origin: center;
			}
		</style>
	</head>
	<body>
		<div class="box"></div>
	</body>
</html>
